<template>
    <view>
        <view class="orderInfo">
            <view class="orderInfoBox">
                <view class="h1">订单信息：</view>
                <view class="orderInfoList" v-if="order_info">
                    <view class="li">{{$lang('店铺名称')}}：{{order_info.shop.shop_name}} </view>
                    <view class="li">{{$lang('客户名称')}}：{{order_info.customer}} </view>
                    <view class="li">{{$lang('联系方式')}}：{{order_info.user_mobile}} </view>
                    <view class="li">{{$lang('客户地址')}}： {{order_info.user_address}}</view>
                </view>
            </view>
        </view>
        <view class="assemInfo">
            <view class="h1">{{$lang('组装单信息')}}：</view>
            <view class="assemInfoMain">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <view v-for="(item,index) in ruleForm.list" :key="index">
                        <view class="h2">
                            {{$lang('订单')}}：
                            <text>{{item.goods_code}}</text>
                            <text style="margin-left: 50rpx;">{{item.num}}{{$lang('份')}}</text>
                        </view>
                        <uni-forms-item :name="'list.' + index + '.warehouse_name'" :rules="rules.warehouse_name.rules">
                            <view class="li">
                                <view class="fl"><text class="red">*</text>{{$lang('关联工厂仓库')}}：</view>
                                <view class="fr">
                                    <input type="text" v-model="item.warehouse_name" :placeholder="$lang('请选择工厂仓库')">
                                    <image src="../../static/images/icon13.png"></image>
                                    <view class="hideBox" @click="produceWarehouseListFun(1,index)"></view>
                                </view>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item :name="'list.' + index + '.goods_shelves_name'" v-if="item.warehouse_id" :rules="rules.goods_shelves_name.rules">
                            <view class="li">
                                <view class="fl"><text class="red">*</text>{{$lang('关联货位')}}：</view>
                                <view class="fr">
                                    <input type="text" v-model="item.goods_shelves_name" :placeholder="$lang('请选择关联货位')">
                                    <image src="../../static/images/icon13.png"></image>
                                    <view class="hideBox" @click="produceGoodsShelvesListFun(2,index,item.warehouse_id)"></view>
                                </view>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item :name="'list.' + index + '.goods_stock_name'" v-if="item.goods_shelves_id" :rules="rules.goods_stock_name.rules">
                            <view class="li">
                                <view class="fl"><text class="red">*</text>{{$lang('关联原材料')}}：</view>
                                <view class="fr" style="flex-direction: column;align-items: normal">
                                    <view class="frTop">
                                        <input type="text" v-model="item.goods_stock_name" :placeholder="$lang('请选择原材料')">
                                        <image src="../../static/images/icon13.png" :class="item.material && item.material.length > 0 ? 'rotate180' : ''"></image>
                                        <view class="hideBox" @click="produceGoodsCodeListFun(3,index,item.warehouse_id,item.goods_shelves_id)"></view>
                                    </view>
                                    <view class="stockList" v-if="item.material && item.material.length > 0">
                                        <view v-for="(data,dataIndex) in item.material" :key="dataIndex">
                                            <uni-forms-item :name="`list.${index}.material.${dataIndex}.num`" style="margin-bottom: 0" :rules="rules.num.rules">
                                                <view class="listLi">
                                                    <view class="listLiFl">
                                                        <text>{{data.goods_code}}</text>
                                                        <input type="text" v-model="data.num">
                                                        <text>{{$lang('份')}}</text>
                                                    </view>
                                                    <view class="listLiFr" @click="del(dataIndex,item)">
                                                        <image src="../../static/images/icon16.png"></image>
                                                    </view>
                                                </view>
                                            </uni-forms-item>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </uni-forms-item>
                    </view>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确定')}}</view>
            </view>
        </view>
        <u-picker
                :show="pickerShow"
                :columns="pickerColumns"
                @close="pickerShow = false"
                @cancel="pickerShow = false"
                @confirm="pickerConfirm"
                :keyName="keyName"
                closeOnClickOverlay
        ></u-picker>
    </view>
</template>

<script>
    import {
        produceWarehouseList,
        assemblePageData,
        produceGoodsShelvesList,
        produceGoodsCodeList,
        assemble
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{
                    list:[]
                },
                rules:{
                    warehouse_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择工厂仓库') }
                        ]
                    },
                    goods_shelves_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择关联货位') }
                        ]
                    },
                    goods_stock_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择原材料') }
                        ]
                    },
                    num: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入份数') }
                        ]
                    },
                },
                pickerShow:false,
                pickerColumns:[],
                keyName:'',
                type:'',
                index:'',
                order_info:''
            }
        },
        onLoad(options) {
            uni.setNavigationBarTitle({
                title: this.$lang('组装单')
            });
            this.ruleForm.id = options.id;
            this.assemblePageDataFun(options.id)
        },
        methods: {
            del(index,item){
                item.material.splice(index,1);
                item.goods_stock_name = item.goods_stock_name.split(',').filter((_, i) => i !== index).toString();
            },
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    console.log(this.ruleForm);
                    assemble(this.ruleForm).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('组装单提交成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        } else{
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                            })
                        }
                    })
                }).catch(err => {

                })
            },
            produceGoodsCodeListFun(type,index,warehouse_id,goods_shelves_id){
                produceGoodsCodeList({
                    warehouse_id:warehouse_id,
                    goods_shelves_id:goods_shelves_id,
                }).then(res => {
                    this.type = type;
                    this.index = index;
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.keyName = 'goods_code';
                    this.pickerShow = true;
                })
            },
            produceGoodsShelvesListFun(type,index,id){
                produceGoodsShelvesList({
                    id:id
                }).then(res => {
                    this.type = type;
                    this.index = index;
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.keyName = 'name';
                    this.pickerShow = true;
                })
            },
            assemblePageDataFun(){
                assemblePageData({
                    id:this.ruleForm.id
                }).then(res => {
                    this.order_info = res.data.order_info
                    this.ruleForm.list = res.data.goods_item;
                    this.ruleForm.list.forEach(item => {
                        item.item_id = item.id;
                        item.goods_stock_id = []
                    })
                })
            },
            pickerConfirm(e){
                if(this.type == 1){
                    this.ruleForm.list[this.index].warehouse_name = e.value[0].name;
                    this.ruleForm.list[this.index].warehouse_id = e.value[0].id;
                } else if(this.type == 2){
                    this.ruleForm.list[this.index].goods_shelves_name = e.value[0].name;
                    this.ruleForm.list[this.index].goods_shelves_id = e.value[0].id;
                } else if(this.type == 3){
                    // this.ruleForm.list[this.index].goods_stock_name = e.value[0].goods_code;
                    this.ruleForm.list[this.index].goods_stock_id.push(e.value[0].goods_code);
                    this.ruleForm.list[this.index].goods_stock_id = [...new Set(this.ruleForm.list[this.index].goods_stock_id)]
                    this.ruleForm.list[this.index].goods_stock_name = this.ruleForm.list[this.index].goods_stock_id.toString();
                    console.log(this.ruleForm.list);
                    let param = JSON.parse(JSON.stringify(this.ruleForm));
                    console.log(param);
                    param.list.forEach(item => {
                        item.material = [];
                        item.goods_stock_id.forEach(data => {
                            this.pickerColumns[0].forEach(code => {
                                if(code.goods_code == data){
                                    // 使用 Vue.set 确保响应式
                                    this.$set(item.material, item.material.length, {
                                        num: '', // 初始化可编辑值
                                        goods_code: code.goods_code,
                                        goods_stock_id: code.id,
                                        warehouse_id: item.warehouse_id,
                                        goods_shelves_id: item.goods_shelves_id
                                    });
                                }
                            })
                        })
                    })
                    this.ruleForm = param;
                }
                this.pickerShow = false;
            },
            produceWarehouseListFun(type,index){
                produceWarehouseList().then(res => {
                    this.type = type;
                    this.index = index;
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.keyName = 'name';
                    this.pickerShow = true;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .orderInfo{
        padding: 0 20rpx;
        margin-top: 30rpx;
        .orderInfoBox{
            background: #eff2f8;
            border-radius: 10rpx;
            padding: 35rpx 0;
            .h1{
                font-size: 28rpx;
                color: #222;
                position: relative;
                padding-left: 30rpx;
                &:after{
                    content: '';
                    width: 8rpx;
                    height: 30rpx;
                    border-radius: 8rpx;
                    background: #365aa6;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .orderInfoList{
                padding: 0 37rpx;
                margin-top: 10rpx;
                .li{
                    font-size: 30rpx;
                    line-height: 55rpx;
                    color: #222;
                }
            }
        }
    }
    .assemInfo{
        margin-top: 50rpx;
        .h1{
            font-size: 28rpx;
            color: #222;
            position: relative;
            padding-left: 30rpx;
            &:after{
                content: '';
                width: 8rpx;
                height: 30rpx;
                border-radius: 8rpx;
                background: #365aa6;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .assemInfoMain{
            padding: 30rpx;
            .h2{
                display: flex;
                align-items: center;
                font-size: 32rpx;
                color: #555;
                margin-bottom: 22px;
                text{
                    color: #365aa6;
                }
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    min-height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    .frTop{
                        display: flex;
                        align-items: center;
                        position: relative;
                        min-height: 90rpx;
                    }
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                        &.rotate180{
                            transform: rotateZ(180deg);
                        }
                    }
                    .stockList{
                        padding-bottom: 20rpx;
                        .listLi{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 90rpx;
                            background: #eff2f8;
                            border-radius: 10rpx;
                            padding: 0 50rpx;
                            .listLiFl{
                                display: flex;
                                align-items: center;
                                text{
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                                input{
                                    width: 80rpx;
                                    margin: 0 15rpx;
                                    border-bottom: 1px solid #365aa6;
                                    text-align: center;
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                            }
                            .listLiFr{
                                image{
                                    width: 22rpx;
                                    height: 22rpx;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #fff;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
